const puppeteer = require('puppeteer');
const chalk = require('chalk')
const log = console.log
const config = require('./config')
var pickMetaDatas = config.pickMetaData
const saveUtil = require('./saveImg')
const dateUtil = require('../utils/dateFormat')

    ; (async () => {

        console.log(`${dateUtil.getYMDhms4now()} 开始访问`);
        // 启动一个浏览器
        const browser = await puppeteer.launch({
            // defaultViewport : { 'width' : width,'height' : height },
            args: ['--no-sandbox'],
            dumpio: false,
            headless: false //打开chrome可视化窗口 true是不打开 false是打开
        });
        console.log(`${dateUtil.getYMDhms4now()} 打开一个新tab页面`)
        // 开启一个新页面(await browser.pages()官网写法默认两个tab，操作第二个tab页)
        const page = (await browser.pages())[0];



        // const page = await browser.newPage();

        // page.setDefaultNavigationTimeout( 90000 );

        await page.setViewport({
            width: 1773,
            height: 903
        });

        // await page.setUserAgent( 'UA-TEST' );


        console.log('访问要抓取资源的网站：', config.url)
        await page.goto(config.url, {
            waitUntil: 'networkidle2',  // 网络空闲说明已加载完毕
            // waitUntil: 'domcontentloaded' // 当dom节点已经加载完毕
        });

        // 等待页面滚动完毕，这里设置的是固定的时间间隔，之前使用过page.waitForNavigation()，但是因为等待的时间过久导致报错（Puppeteer默认的请求超时是30s,可以修改）,因为这个页面总有一些不需要的资源要加载，而我的网络最近日了狗，会导致超时，因此我设定等待2.5s就够了
        // await page.waitFor(10000) // 等待登录弹窗显示

        console.log('**针对网站的各个部分开始进行资源的抓取**')
        // console.log('pickMetaDatas', pickMetaDatas)
        // await pickMetaDatas.forEach(async (item, index) => {
        //     if (item.listLen > 1) {
        //         // 使用一个 for await 循环，不能一个时间打开多个网络请求，这样容易因为内存过大而挂掉
        //         for (let i = 2; i <= item.listLen; i++) {
        //             // 找到左侧图片展示列表的右侧箭头
        //             let moreBtn = await page.$(item.loadMoreSelector)
        //             try {
        //                 await moreBtn.click()
        //                 console.log('选择器右击了。。。', item.loadMoreSelector)
        //                 // 等待页面加载完毕，这里设置的是固定的时间间隔
        //                 await page.waitFor(2000)
        //                 // 点击获取更多进度
        //                 console.log('点击完毕，加载数据', i)
        //             } catch (error) {
        //                 console.log(chalk.yellow(error))
        //             }

        //         }
        //         console.log(`加载${item.selector}更多部分数据完毕....`)
        //     }
        // })

        for (let i = 2; i <= 3; i++) {
            // 找到左侧图片展示列表的右侧箭头
            let moreBtn = await page.$('.paging.next')
            try {
                await moreBtn.click()
                console.log('选择器右击了。。。.paging.next' )
                // 等待页面加载完毕，这里设置的是固定的时间间隔
                await page.waitFor(2000)
                // 点击获取更多进度
                console.log('点击完毕，加载数据', i)
            } catch (error) {
                console.log(chalk.yellow(error))
            }

        }

        // 点击完等会
        // await page.waitFor(500)



        // 滚动完页面 休息2s
        // await page.waitFor(2000)

        await page.evaluate(function() {
            /* 这里做的是渐进滚动，如果一次性滚动则不会触发获取新数据的监听 */
            /*执行js代码（滚动页面）*/
            for (var y = 0; y <= 22000; y += 50) {
                setTimeout(() => {
                    window.scrollTo(0, y)
                }, 33 + y)
                setTimeout(() => {
                    window.scrollTo(0, y / 2)
                }, 333 + y)
            }

            window.scrollTo(0, $(document).scrollTop() / 2)
        })
        console.log('页面滚动完毕')

        console.log('开始获取页面元素O(∩_∩)O')
        // 爬取目标数据
        const results = await page.evaluate((pickMetaDatas) => {
                // 拿到页面上的jQuery
                var $ = window.$
                var totalData = {}

                pickMetaDatas.forEach((outerItem, index) => {
                    // 某个模块的选择器，用于选中页面中的图片元素
                    var elements = $(outerItem.selector)
                    // 用来存储某个模块的具体信息
                    var results = [];

                    // 获取图片链接
                    if (elements.length) {
                        elements.each((index, innerItem) => {
                            let imgUrl = $(innerItem).prop('src')
                            results.push({
                                imgUrl,
                                saveImgPath: outerItem.saveImgPath
                            })
                        });
                    }
                    // 将各个模块的数据存储到对象中
                    totalData[outerItem.saveImgPath] = results
                })
                console.log('获取页面元素完毕')
                return totalData
        }, pickMetaDatas);

        console.log('imgUrlResults', results);

        console.log("开始保存图片到本地 请稍等.....");

        await saveUtil.beforeSave().then((res) => {
            console.log('index中的创建父目录', res)
            saveUtil.saveFile(results)
        }).catch(err => {
            console.log(chalk.yellow(err))
        })

        // 关闭浏览器
        //   browser.close();
    })();


